<template>
    <WeDragBox class="tool-bar">
        <div class="tool-box tool-top">
            <img :src="user?.avatar" class="avatar no-drag" @click.stop="onHandleAvatarClick" />
            <template v-for="menu in menuTop" :key="menu.icon">
                <a-badge :count="menu.unReadCount || 0" title="" :offset="[-16, 10]">
                    <i class="wechatfont no-drag" :title="menu.title" :class="[
                        activeToolTop === menu.icon
                            ? `active wechat-${menu.icon}`
                            : `wechat-${menu.icon}`,
                    ]" @click="onHandleMenuClick(menu.icon)"></i>
                </a-badge>
            </template>
        </div>

        <div class="tool-box tool-bottom">
            <div class="tool-bottom-item" :class="[`tool-${menu.icon}`]" v-for="menu in menuBottom" :key="menu.icon"
                @click="onHandleMenuClick(menu.icon)">
                <i :class="[`no-drag wechatfont wechat-${menu.icon}`]" :title="menu.title"></i>
                <div class="tool-item-box" ref="toolHandler" v-if="activeToolBottom === menu.icon">
                    <template v-if="activeToolBottom === 'applet'">
                        <img src="https://tucdn.wpon.cn/2023/08/25/c4a2e28062909.png" class="applet" alt="" srcset="">
                        <p>使用微信 扫码体验</p>
                    </template>
                    <template v-else-if="activeToolBottom === 'phone'">
                        <p class="phone phone-text">手机正在浏览和浮窗的内容将会在这里展示</p>
                        <p class="phone phone-button"><i class="wechatfont wechat-files"></i>文件传输助手</p>
                    </template>
                    <template v-else>
                        <div v-for="menu in menus" class="menu-item" :key="menu.value"
                            @click.stop="onHandleMenuClick(menu.value)">{{ menu.label }}</div>
                    </template>
                </div>
            </div>
        </div>
    </WeDragBox>

    <RelativeBox :visible="infoVisible" @close="infoVisible = false" :style="boxStyle">
        <UserInfo :user="user" type="own" @send="infoVisible = false" />
    </RelativeBox>

    <!-- <Timeline :visible="timelineVisible" @close="closeTimeline" :user/> -->

</template>
<script lang="tsx">
import { defineComponent, PropType, ref, reactive } from "vue";
import { ToolButtons, ToolBars, User } from "../utils/Interfaces";
import { toolBars, toolButtons, user } from "../utils/data";
import { eventToolClick, eventAvatarClick } from "../utils/event";
// import { activeMenu } from "./RelativeBox.vue

import RelativeBox from "./relativeBox.vue"
import UserInfo from "./userInfo.vue"
import Timeline from "./Timeline.vue"

export default defineComponent({
    name: "ToolBar",
    components: { 
        RelativeBox, UserInfo, 
        // Timeline
    },
    props: {
        user: { type: Object as PropType<User>, default: () => { return user; }, },
        menuTop: { type: Object as PropType<ToolBars>, default: () => { return toolBars } },
        menuBottom: { type: Object as PropType<ToolButtons>, default: (): ToolButtons => { return toolButtons; } }
    },
    setup(props, { emit }) {
        const activeToolBottom = ref("");
        const activeToolTop = ref("");
        const infoVisible = ref(false);
        // const timelineVisible = ref(true);

        const boxStyle = reactive({ top: 0, left: 0 });
        const onHandleAvatarClick = (e) => {
            infoVisible.value = !infoVisible.value;
            boxStyle.top = e.clientY;
            boxStyle.left = e.clientX;
            eventAvatarClick(props.user, emit, e)
        }
        // 点击工具栏icon
        const onHandleMenuClick = (type: string) => {
            if (props.menuBottom.some(item => item.icon === type)) {
                activeToolBottom.value = activeToolBottom.value === type ? "" : type;
            } else {
                activeToolTop.value = type;
            }

            eventToolClick(type, emit)
        };

        return {
            onHandleAvatarClick,
            onHandleMenuClick,
            activeToolBottom,
            activeToolTop,
            boxStyle,
            infoVisible,
            // timelineVisible,
            ...props
        };
    },
});
</script>

<style lang="less" scoped>
@import "../style/toolBarScoped.less";
</style>

<style lang="less">
@import "../style/toolBar.less";
</style>